<template lang="">
  <div>
    <van-cell
      v-for="item in artList"
      :key="item.pubdate"
      :title="item.title"
      @click="$router.push('/articleIndex/' + item.art_id.toString())"
    >
      <!-- van-cell有一个名为label的插槽，用来设置标题正下方的内容 -->
      <div slot="label">
        <!-- 图文.... -->
        <!-- 图片 van-grid
                            当前文章有几张图，就用几个宫格
                            :border="false" 取消宫格的边框线。
                            - border="false" 表示它的属性值就是一个普通的字符串"falase
                            -->
        <van-grid :column-num="item.cover.images.length" :border="false">
          <van-grid-item v-for="(img, idx) in item.cover.images" :key="idx">
            <van-image lazy-load :src="img" />
          </van-grid-item>
        </van-grid>

        <!-- 文字说明 -->
        <div class="meta">
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ item.pubdate | relativeTime }}</span>
          <!-- 只有是登陆用户，才能看见这个 X 按钮 -->
          <span
            class="close"
            v-if="!isView && $store.state.tokenInfo.token"
            @click.stop="$emit('close', item)"
          >
            <van-icon name="cross"></van-icon>
          </span>
        </div>
      </div>
    </van-cell>
  </div>
</template>
<script>
export default {
  name: "ArtListTemplate",
  props: {
    artList: {
      type: Array,
      default() {
        return [];
      }
    },
    // 默认只读模式 关闭
    isView: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style scoped lang="less">
.meta {
  display: flex;
  span {
    margin-right: 10px;
  }
  .close {
    // 让它在最右边
    // 它的父级容器是flex的，给当前元素设置左外边距为auto，会让这个元素在父级容器
    // 的最右边
    margin-left: auto;
  }
}
</style>
